<!--4G执法仪注册-->
<template>
  <div class="template-content">
    <SearchHeader v-model="queryParam.where.keyword" :can-add="canModify" @handleSearch="getData" @handleAdd="add" @handleInit="queryParam.init">
      <Row :gutter="4">
        <Col span="3"><Input :placeholder="ph.placeholder.deviceCode" v-model="queryParam.where.code" maxlength=20></Input> </Col>
        <Col span="3"><Input :placeholder="ph.placeholder.deviceName" v-model="queryParam.where.name" maxlength=100></Input> </Col>
        <Col span="3"><OrganizationTree v-model="queryParam.where.orgId" width="200px" :placeholder="ph.placeholder.organization"></OrganizationTree> </Col>
        <Col span="3"><UserSelect ref="srhUserSelect" width="200px" :placeholder="ph.placeholder.user"></UserSelect> </Col>
        <Col span="3"><GbServerSelect ref="srhGbServerSelect" v-model="queryParam.where.gbServerId" width="200px"/></Col>
        <Col span="3">
          <Select :placeholder="ph.deviceStatus.title" v-model="queryParam.where.state">
            <Option value=null>{{ph.deviceStatus.statusAll}}</Option>
            <Option value="1">{{ph.deviceStatus.status1}}</Option>
            <Option value="2">{{ph.deviceStatus.status2}}</Option>
            <Option value="3">{{ph.deviceStatus.status3}}</Option>
          </Select>
        </Col>
        <Col span="3">
          <Select :placeholder="ph.onlineStatus.title" v-model="queryParam.where.online">
            <Option value=null>{{ph.onlineStatus.statusAll}}</Option>
            <Option value="true">{{ph.onlineStatus.statusOnline}}</Option>
            <Option value="false">{{ph.onlineStatus.statusOffline}}</Option>
          </Select>
        </Col>
      </Row>
    </SearchHeader>
    <Card>
      <Table border :columns="columns" :data="tableData" :loading="dataLoading">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="default" :Title="$t('browse')" icon="md-list-box" style="margin-right: 3px" @click="view(row)"></Button>
          <Button type="default" :disabled="!canModify" :Title="$t('edit')" icon="md-create" style="margin-right: 3px" @click="edit(row)"></Button>
          <Button type="default" :disabled="!canModify" :Title="$t('delete')" icon="md-trash" style="margin-right: 3px" @click="remove(row)"></Button>
          <Button type="default" :Title="$t('scan_code_to_register')" icon="md-reorder" style="margin-right: 3px" @click="qrCode(row)"></Button>
          <Button type="default" :Title="$t('play')" icon="md-play"  style="margin-right: 1px" v-if="row.online" @click="play(row)"></Button>
          <Button type="default" v-if="1===0" :disabled="!canModify" :Title="$t('firmware_upgrade')" icon="md-trending-up" style="margin-right: 3px" @click="upgrade(row)"></Button>
        </template>
        <template slot-scope="{ row, index }" slot="upgrade">
          <Button type="default" :Title="$t('firmware_upgrade')"  icon="md-trending-up" style="margin-right: 3px" @click="upgrade(row)"></Button>
        </template>
        <template slot-scope="{ row, index }" slot="state">
          <span v-if="row.state==1" style="color: green" >{{$t('device_status_1')}}</span>
          <span v-if="row.state==2" style="color: #ed4014" >{{$t('device_status_2')}}</span>
          <span v-if="row.state==3" style="color: #BB5E26" >{{$t('device_status_3')}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="online">
          <span v-if="row.online" style="color: green" >{{$t('online')}}</span>
          <span v-if="!row.online" style="color: red">{{$t('offline')}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="hasAudio">
          <span v-if="row.hasAudio" style="color: green" >{{$t('endabled')}}</span>
          <span v-if="!row.hasAudio" style="color: red">{{$t('disabled')}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="subscriber">
          <span v-if="row.subscriberPosition" style="color: green" >{{$t('subscribe')}}</span>
          <span v-if="!row.subscriberPosition" >{{$t('un_subscribe')}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="streamMode">
          <span v-if="row.streamMode==='UDP'" style="color: green" >UPD</span>
          <span v-if="row.streamMode==='TCP_PASSIVE'" >{{$t('tcp_passive')}}</span>
        </template>

      </Table>
      <TopnavPage v-model="queryParam.page" @changePage="changePage"></TopnavPage>
    </Card>
    <Modal draggable sticky scrollable v-model="playModal"  :title="$t('vedio_play')"
           :mask=false width="900px"
           :mask-closable="false"
           :closable="true"
           :footer-hide=true
           @on-visible-change = "onPlayerVisible">
      <RtcWithTalkPlayer
        :id=1
        ref="rtcWithTalkPlayer"
        videoId = "device4gPlayer"
      ></RtcWithTalkPlayer>
      <div style="height: 46px;display: flex;justify-content: center; align-items: center">
        <Button type="primary" @click="closePlayer">{{$t('close')}}</Button>
      </div>
    </Modal>
    <DevicePlayer v-if="1===0" ref="devicePlayer" ></DevicePlayer>
    <Device4gEdit ref="device4gEdit"></Device4gEdit>
    <Device4gQrcode ref="device4gQrcode"/>
    <Modal v-model="testModel" width = "200px">
      <div style="width: 100px;height: 200px">
        <CustomSlider></CustomSlider>
      </div>

    </Modal>
    <EnterAesPasswordDialog ref="enterAesPasswordDialog">></EnterAesPasswordDialog>
  </div>
</template>
<script>
import CustomSlider from '@/components/topnav/CustomSlider.vue'
import OrganizationTree from '@/components/topnav/OrganizationTree'
import GbServerSelect from '@/components/topnav/GbServerSelect.vue'
import Device from '@/api/Device'
import DevicePlayer from '../Player/DevicePlayer.vue'
import RtcWithTalkPlayer from '@/view/Home/component/RtcWithTalkPlayer.vue'
import UserSelect from '_c/topnav/UserModelSelect'
import TopnavPage from '_c/topnav/TopnavPage'
import SearchHeader from '@/view/Common/SearchHeader'
import Device4gEdit from '@/view/Device/Device4gEdit'
import Device4gQrcode from '@/view/Device/Device4gQrcode'
import {apiResult, clone} from '@/libs/util'
import AuthCheck from "@/api/AuthCheck";
import EnterAesPasswordDialog from '@/view/Home/utils/EnterAesPasswordDialog';
export default {
  name: 'Device4g',
  components: { GbServerSelect, OrganizationTree, UserSelect, DevicePlayer,RtcWithTalkPlayer,
    TopnavPage, SearchHeader, Device4gQrcode,CustomSlider,Device4gEdit,EnterAesPasswordDialog },
  computed:{
    ph(){
      return{
        placeholder:{
          deviceCode:this.$t('device_code'),
          deviceName:this.$t('device_name'),
          organization:this.$t('select_organization'),
          user:this.$t('select_people'),
        },
        deviceStatus: {
          title:this.$t('device_status'),
          statusAll:this.$t('device_status_all'),
          status1:this.$t('device_status_1'),
          status2:this.$t('device_status_2'),
          status3:this.$t('device_status_3'),
        },
        onlineStatus:{
          title:this.$t('online_status'),
          statusAll:this.$t('all'),
          statusOnline:this.$t('online'),
          statusOffline:this.$t('offline'),
        }
      }
    },
    columns(){
      return [
          { title: this.$t('operate'), key: 'action', width: 220, slot: 'action', align: 'center' },
          { title: this.$t('device_code'), key: 'code', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light' },
          { title: this.$t('device_name'), key: 'name', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light' },
          { title: this.$t('video_channel'), key: 'defaultChannel', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light' },
          { title: this.$t('alarm_channel'), key: 'defaultAlarmChannel', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light' },
          { title: this.$t('gb_server'), key: 'gbServerName', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light' },
          { title: this.$t('personnel'), key: 'userName', sortable: true, width: 150,ellipsis:true,tooltip:true,tooltipTheme:'light' },
          { title: this.$t('organization'), key: 'shortName', sortable: true, width: 150,ellipsis:true,tooltip:true,tooltipTheme:'light' },
          { title: this.$t('subscribe_location'), key: 'subscriberPosition', width: 200, slot:'subscriber', align: 'center',ellipsis:true,tooltip:true,tooltipTheme:'light' },
          { title: this.$t('online'), key: 'online', sortable: true, width: 120, slot:'online', align: 'center',ellipsis:true,tooltip:true,tooltipTheme:'light' },
          { title: this.$t('enabled'), key: 'state', sortable: true, width: 120, slot:'state', align: 'center',ellipsis:true,tooltip:true,tooltipTheme:'light' },
          { title: this.$t('enabled_audio'), key: 'hasAudio', sortable: true, width: 150, slot:'hasAudio', align: 'center',ellipsis:true,tooltip:true,tooltipTheme:'light' },
          { title: this.$t('signalling_protocol'), key: 'streamMode', sortable: true, width: 200, slot:'streamMode', align: 'center',ellipsis:true,tooltip:true,tooltipTheme:'light' },
          { title: this.$t('imei_code'), key: 'imeiCode', sortable: true, width: 150, align: 'center',ellipsis:true,tooltip:true,tooltipTheme:'light' },
          //{ title: this.$t('firmware_upgrade'), key: 'action', width: 80, slot: 'upgrade', align: 'center' },
          //{ title: this.$t('result_firmware_upgrade'), key: 'note', sortable: true, width: 200, align: 'left',ellipsis:true,tooltip:true,tooltipTheme:'light'  },
        ]
    },
  },
  data () {
    return {
      canModify:false,
      api: new Device(),
      testModel:false,
      dataLoading: false,
      playModal:false,
      queryParam: {
        page: {
          desc: ['create_time'],
          pages: 1,
          size: 15,
          total: 0,
          current: 1,
        },
        where: {
          keyword:null,
          code: null,
          name: null,
          //cate:1,
          cate: 2,
          orgId: null,
          userId: null,
          gbServerId: null,
          state:null,
          online:null
        },
        init:()=>{
          this.queryParam.where.keyword=null;
          this.queryParam.where.code=null;
          this.queryParam.where.name=null;
          this.queryParam.where.cate=2;
          this.queryParam.where.orgId=null;
          this.queryParam.where.userId=null;
          this.queryParam.where.gbServerId=null;
          this.queryParam.where.state=null;
          this.queryParam.where.online=null;
        }
      },
      stateStr: '',//'正常',
      tableData: [],
    }
  },
  methods:{
/*    testCustomSider(){
      this.$Message.info("自定义滑块！");
      this.testModel = true;
    },*/
    add() {
      this.$refs.device4gEdit.openDialog("ADD",null, this.getData);
    },
    closePlayer(){
      this.$refs.rtcWithTalkPlayer.stop();
      this.playModal = false;
    },
    changePage() {this.getData()},
    edit(row) {
      this.$refs.device4gEdit.openDialog("EDIT",clone(row), this.getData);
    },
    getData() {
      /** 生成查询条件 */
      this.dataLoading = true;
      this.api.queryPage(JSON.stringify(this.queryParam)).then(res => {
        //console.log(">>>>> Device4g.getData(): res=%o",res)
        this.dataLoading = false;
        this.tableData = null;
          apiResult(res.data,false,result=>{
            this.queryParam.page.total = result.data.total;
            this.tableData = result.data.records;

          })
      })
    },
    onPlayerVisible(state){
      if (!state){
        this.$refs.rtcWithTalkPlayer.stop();
      }
    },
    play(row){
      //console.log("通知设备推流：" + row.code + " : " + row.defaultChannel);
      //console.log(">>>>>> row: %o",row)
      row['arrt']={streamEncryption:row.streamEncryption};
      this.$refs.enterAesPasswordDialog.confirm(row,data=>{
        this.$refs.rtcWithTalkPlayer.openDialog(row.code,row.defaultChannel,null,row.name);
        this.playModal = true;
      });

    },
    qrCode(row){
      //this.codeSource = "01|34020000002000000002|3402000000|47.105.213.202|15060|34020100001310000001|12345678|5060|60|5|32013344551311001527|32013344551341001527|32013344551311001527|32013344559991001529|32013344559981001528";
      const codeSource={
        protocol:"01", //GB28181
        gbServerCode: row.gbServerCode,
        gbServerDomain: row.gbServerDomain,
        gbServerHost: row.gbServerHost,
        gbServerPort: row.gbServerPort,
        userName: row.code,
        gbServerPasswrd: row.gbServerPasswrd,
        localPort: "15060",
        registerExpire:"3600",
        keepalive: "5",
        deviceId: row.code,
        alarmChannel: row.defaultAlarmChannel,
        backChannel: row.defaultChannel,
        frontCamera: "",
        extenalCamera: ""
      }
      this.$refs.device4gQrcode.openDialog(codeSource);

    },
    remove (row) {
      this.$Modal.confirm({
        title: this.$t('delete_confirm'),
        content: this.$t('delete_make_sure'),
        onOk: () => {
          this.api.removeDevice(JSON.stringify(row)).then(res=>{
            apiResult(res.data,true,result=>{
              this.getData();
            })
          })
        },
        onCancel: () => {}
      });
    },
    upgrade(row){
      this.api.firmwareUpdgrade(JSON.stringify(row)).then(res => {
        console.log("固件升级结果：%o",res);
        if (!!res.data.data){
          this.$Message.info(res.data.data.msg)
        }else{
          this.$Message.info(res.data.msg)
        }
      })
    },
    view(row) {
      this.$refs.device4gEdit.openDialog("VIEW",clone(row), this.getData);
    },
  },
  mounted() {
    this.canModify = new AuthCheck().netDevRegEdit();
    this.getData();

  }
}
</script>
<style lang="less">
  //@import "../../my-theme/template";
</style>
